<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>帖子</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <!--<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/milligram.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/fonts.style.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/style.css" type="text/css" />-->


    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!--<script src="../static/js/jquery-3.4.1.js"></script>-->
    <!--<script src="../static/js/jQueryCode.js"></script>-->
    <!--<script src="../static/js/bootstrap.min.js"></script>-->

</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <div class="row">
            <!--帖子内容 start-->
            <div class="col-12">
                <!--th:action="@{/community/collectTopic/} + ${topic.id}" method="post"-->
                <form class="topic-form">
                    <!--帖子信息-->
                    <div class="show-topic">
                        <h4 class="topic-title">[[${topic.title}]]</h4>
                        <hr class="divider"><!-- 分界线 -->
                        <div class="row col-12 floors">
                            <div class="col-md-2">
                                <p class="topic-author" th:align="center">[[${name}]]</p>
                            </div>
                            <div class="col-md-10">
                                <p class="topic-content" th:text="${topic.content}"></p>
                                <input type="hidden" th:value="${topic.id}" id="Tid">
                            </div>
                        </div>
                    </div>
                    <!--收藏按钮-->
                    <div class="collection">
                        <input class="collection-btn animation" value="收藏" id="collectBtn" type="button" />

                        <div th:if="${topicCollect}">
                            <input type="hidden" th:value="${topicCollect.tid}" id="collectTid">
                            <input type="hidden" th:value="${topicCollect.uid}" id="collectUid">
                            <input type="hidden" th:value="${uid}" id="sessionUid">
                        </div>
                    </div>
                </form>
            </div>
            <!--帖子内容 end-->

            <!--评论 start-->
            <div class="col-12">
                <hr class="divider"><!-- 分界线 -->
                <h4>评论</h4>
                <form class="comment-form" method="post" th:action="@{/community/sendComment/} + ${topic.id}">
                    <div class="row col-12 box-holder">
                        <textarea class="col-10 comment-box" name="comments"></textarea>
                        <div class="col-2 btn-box">
                            <button class="comment-btn animation" type="submit">
                                <span class="icon-pencil"></span>评论
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!--评论 end-->

            <!--评论区 start-->
            <div class="col-12">
                <hr class="divider"><!-- 分界线 -->
                <div class="comment-area" th:each="comment : ${commentlist}">
                    <div class="show-topic">
                        <div class="row col-12 floors">
                            <div class="col-md-2">
                                <span th:text="${comment.name}"></span>
                            </div>
                            <div class="col-md-10">
                                <span class="topic-content" th:text="${comment.comments}"></span>
                                <small><span class="topic-comment-time" th:text="${comment.time}"></span></small><br>
                                <a href="javascript:;" class="reply_btn" th:value="${comment.id}">回复</a>
                                <th:block th:each="commentReply : ${commentReplies}">
                                    <div th:if="${commentReply.cid} eq ${comment.id}">
                                        <span th:text="${commentReply.name}"></span>
                                        <span th:text="${commentReply.comments}"></span>
                                        <small><span th:text="${commentReply.time}"></span></small><br>
                                        <a class="replyReply_btn" th:value="${commentReply.id}+','+${comment.id}+','+${commentReply.name}">回复</a>
                                        <div th:if="${commentReply.parentId} eq ${commentReply.id}">
                                            <span th:text="${commentReply.name}"></span>
                                            <span th:text="'@&nbsp'+ ${commentReply.replyName}"></span>
                                            <span th:text="${commentReply.comments}"></span>
                                            <small><span th:text="${commentReply.time}"></span></small>
                                        </div>
                                    </div>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--评论区 end-->
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            //页面加载完毕后开始执行的事件
            var ctid = $("#collectTid").val();
            var tid = $("#Tid").val();
            var cuid = $("#collectUid").val();
            var suid = $("#sessionUid").val();

            if (ctid == tid && cuid == suid){
                $("#collectBtn").attr("value","已收藏");
            }else if (ctid != tid || cuid != suid) {
                $("#collectBtn").attr("value","收藏");
            }

            $("#collectBtn").click(function () {
                $.post("/community/collectTopic",{tid:tid},function (data){
                    var ctid = data.ctid;
                    var suid = data.suid;
                    var cuid = data.cuid;
                    if (ctid == tid && cuid == suid){
                        $("#collectBtn").attr("value","已收藏");
                    }else if (ctid != tid && cuid != suid) {
                        $("#collectBtn").attr("value","收藏");
                    }
                });
            });

            $(".reply_btn").click(function(){
                var cid = $(this).attr("value");
                console.log(cid);
                $(".reply_textarea").remove();
                $(".replyReply_textarea").remove();
                $(this).parent().append(
                    "<div class='reply_textarea'>" +
                    "<textarea name='comments' id='comments' cols='40' rows='5'></textarea>" +
                    "<input type='hidden' id='cid' value='"+ cid + "'><br/>" +
                    "<button type='submit' id='commentReply'>回复</button>&nbsp&nbsp" +
                    "<button type='button' id='cancel'>取消</button></div>");
            });

            $(document).on("click","#commentReply",function () {
                var comments = $("#comments").val();
                var cid = $("#cid").val();
                location.href = "/community/sendCommentReply?comments="+comments+"&cid="+cid;
            });

            $(document).on("click","#cancel",function () {
                $(".reply_textarea").remove();
            });

            $(".replyReply_btn").click(function(){
                var idString = $(this).attr("value");
                var result = idString.split(",");
                var parentId = result[0];
                var cid = result[1];
                var replyName = result[2];
                $(".reply_textarea").remove();
                $(".replyReply_textarea").remove();
                $(this).parent().append(
                    "<div class='replyReply_textarea'>" +
                    "<textarea name='comments' id='comments' cols='40' rows='5'>@"+replyName+":&nbsp&nbsp</textarea>" +
                    "<input type='hidden' id='cid' value='"+ cid + "'>" +
                    "<input type='hidden' id='parentId' value='"+ parentId + "'>" +
                    "<input type='hidden' id='replyName' value='"+ replyName + "'><br/>" +
                    "<button type='submit' id='commentReply'>回复</button>&nbsp&nbsp" +
                    "<button type='button' id='cancelReply'>取消</button></div>");
            });

            $(document).on("click","#cancelReply",function () {
                $(".replyReply_textarea").remove();
            });
        });
    </script>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>



<!--<script>-->
<!--function window.onbeforeunload(){-->
<!--var scrollPos;-->
<!--if (typeof window.pageYOffset != 'undefined') {-->
<!--scrollPos = window.pageYOffset;-->
<!--}-->
<!--else if (typeof document.compatMode != 'undefined' &&-->
<!--document.compatMode != 'BackCompat') {-->
<!--scrollPos = document.documentElement.scrollTop;-->
<!--}-->
<!--else if (typeof document.body != 'undefined') {-->
<!--scrollPos = document.body.scrollTop;-->
<!--}-->
<!--document.cookie="scrollTop="+scrollPos; //存储滚动条位置到cookies中-->
<!--}-->
<!--function window.onload()-->
<!--{-->
<!--if(document.cookie.match(/scrollTop=([^;]+)(;|$)/)!=null){-->
<!--var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置-->
<!--document.documentElement.scrollTop=parseInt(arr[1]);-->
<!--document.body.scrollTop=parseInt(arr[1]);-->
<!--}-->
<!--}-->
<!--</script>-->
</body>
</html>